<template>
  <div class="menu">
    <el-menu
        active-text-color="#409EFF"
        background-color="#32363f"
        text-color="#fff"
        style="height: 100%;"
        unique-opened
        router
        :default-active="defaultMenu"
        :collapse="$store.isCollapse"
        :collapse-transition="false"
      >
        <el-sub-menu :index="item.id" v-for="(item, i) in menus" :key="i">
          <template #title>
            <el-icon>
                <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item :index="subItem.frontpath" v-for="(subItem, i2) in item.child" :key="i2">
            <el-icon>
                <component :is="subItem.icon"></component>
            </el-icon>
            <span>{{ subItem.name }}</span>
          </el-menu-item>
        </el-sub-menu>
    </el-menu>    
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed, ref } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

const route = useRoute()
const store = useStore()
const menus = computed(() => {
    return store.state.menu
})

// 默认激活菜单
const defaultMenu = ref(route.path)

onBeforeRouteUpdate((to) => {
    defaultMenu.value = to.path
})
</script>

<style lang="less" scoped>

</style>